<template>
    <div>
        <Header></Header>
        <div class="container">
            <Header2></Header2>
            <br>

            <div class="row">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1" @click="payMethod(1)">支付宝支付</el-menu-item>
                    <el-menu-item index="2" @click="payMethod(2)">微信支付</el-menu-item>
                    <el-menu-item index="3" @click="payMethod(3)">银行卡支付</el-menu-item>
                </el-menu>

                <!--background-color:#2b9de4; -->
                <div class="col-md-9" style=" height: 800px">
                    <h3 class="text-center">开通会员（包月会员书库免费读）</h3>

                    <!--支付页面开始-->
                    <div class="row">
                        <br>
                        <div class="col-md-4 col-md-offset-1" v-for="(dict, index) in buyList">
                            <br>
                            <button class="btn btn-default" @click="buyMonths(dict.buy_month, dict.id, dict.price)">
                                <p>{{dict.buy_month}}个月 <span style="color: #f60" v-show="dict.is_give">买{{dict.buy_month}}个月送{{dict.give_day}}天</span>
                                </p>
                                <p style="color: #999">{{dict.price}}元</p>
                            </button>
                        </div>
                    </div>

                    <div class="row">
                        <br>
                        <div class="col-md-4 col-md-offset-4">
                            <button class="btn btn-info" @click="pay">立即支付</button>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 40px">
                        <div class="col-md-11 col-md-offset-1 text-left" id="payment-note">
                            <p class="lead">
                                温馨提示：
                                ( 注: <span style="color: red">部分书籍</span>包月不可免费阅读)
                            </p>

                            <p class="lead">
                                1、普通会员仅可免费阅读普通包月会员专区书籍，精品书籍订阅八折优惠；
                            </p>

                            <p class="lead">
                                2、超级会员享全站书籍免费阅读特权；
                            </p>

                            <p class="lead">
                                3、欢迎您使用微信/支付宝开通会员需求。
                            </p>
                        </div>
                    </div>
                    <!--支付页面结束-->
                </div>
                <!--background-color:#3db922; -->
                <div class="col-md-3" style="height: 800px">
                    <!--卡片开始-->
                    <el-card class="box-card center-block text-left">
                        <div slot="header" class="clearfix">
                            <span>包月介绍</span>
                        </div>
                        <div class="text item">
                            您开通包月当天起30天内，为您的包月有效期
                        </div>
                    </el-card>
                    <!--卡片结束-->
                    <!--卡片开始-->
                    <el-card class="box-card center-block text-left">
                        <div slot="header" class="clearfix">
                            <span>包月特权介绍</span>
                        </div>
                        <div class="text item">
                            <p>免费读十万包月好书</p>
                            <p>专享订阅八折优惠</p>
                        </div>
                    </el-card>
                    <!--卡片结束-->
                </div>
            </div>
            <Footer></Footer>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Header2 from "../components/Header2";
    import Footer from "../components/Footer";

    export default {
        name: "Recharge",
        components: {
            Header,
            Header2,
            Footer,
        },
        data() {
            return {
                buyList: [],
                chooseBuyMonth: 0,
                currentMemberId: 0,
                currentPrice: 0,
                action: 1,
            }
        },
        created() {
            this.$axios({
                url: `${this.$settings.base_url}/recharge/`,
                method: 'get'
            }).then(response => {
                this.buyList = response.data;
            })
        },
        methods: {
            payMethod(action) {
                this.action = action;
                // console.log('this.action:', this.action);
            },
            pay() {
                if (this.action === 1) {
                    // 支付宝支付
                    this.alipay()
                } else if (this.action === 2) {
                    // 微信支付
                } else if (this.action === 3) {
                    // 银行卡支付
                }
            },
            alipay() {
                // console.log("支付宝支付!");
                // 获取token, 校验用户是否登录
                let token = this.$cookies.get('token');
                if (!token) {
                    this.$message({
                        message: "请先登录!",
                        type: 'warning',
                    });
                    return false;
                }

                // 获取用户当前月份判断用户是否选择
                if (!this.chooseBuyMonth) {
                    this.$message({
                        message: "请选择套餐!",
                        type: 'warning',
                    });
                    return false;
                }

                // 发送axios
                let username = this.$cookies.get('user_dict').username;
                this.$axios({
                    method: 'post',
                    url: `${this.$settings.base_url}/order/pay/`,
                    data: {
                        "subject": `${username}购买会员${this.chooseBuyMonth}月`,
                        "total_amount": this.currentPrice,
                        "pay_type": this.action,
                        "member": this.currentMemberId,
                    },
                    headers: {
                        Authorization: `jwt ${this.$cookies.get('token')}`
                    },
                }).then(response => {
                    console.log(response.data);
                    if (response.data.code) {
                        open(response.data.result, '_self');
                    } else {
                        this.$message({
                            message: '订单处理失败!',
                            type: 'warning',
                        })
                    }
                }).catch(error => {
                    this.$message({
                        message: "未知错误!",
                        type: 'warning',
                    })
                })
            },
            buyMonths(month, id, price) {
                this.chooseBuyMonth = month;
                this.currentMemberId = id;
                this.currentPrice = price;
                // console.log('this.chooseBuyMonth + this.currentMemberId + this.currentPrice:', this.chooseBuyMonth, this.currentMemberId, this.currentPrice);
            }
        },

    }
</script>

<style scoped>
    /*卡片开始*/
    .box-card {
        width: 256px !important;
        margin-left: -15px;
        height: 164px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    /*卡片结束*/

    p {
        margin: 0;
    }

    .btn {
        font-size: 20px;
        width: 240px;
        height: 80px
    }

    .btn p:first-child {
        margin-bottom: 20px
    }

    .btn p:last-child {
        color: #999
    }

    .btn p span {
        color: #f60
    }

    #payment-note p {
        line-height: 40px;
    }
</style>